<template>
  <div :class="['page-panel', border && 'is-border', bgImg && 'is-grid']">
    <slot name="header">
      <div v-if="header" class="page-panel-header">{{ header }}</div>
    </slot>

    <div class="page-panel-body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  header: {
    type: String,
    default: '',
  },
  border: {
    type: Boolean,
    default: false,
  },
  bgImg: {
    type: String,
    default: '', // '' | grid
  },
})
</script>

<style lang="scss" scoped>
.page-panel {
  position: relative;
  z-index: 0;
  border: 1px solid rgba(7, 118, 181, 0.5);
  box-shadow: inset 0 0 10px rgba(7, 118, 181, 0.4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  &.is-border {
    background:
      linear-gradient(to bottom, #00eef3, #00eef3) left top no-repeat,
      linear-gradient(to right, #00eef3, #00eef3) left top no-repeat,
      linear-gradient(to bottom, #00eef3, #00eef3) right top no-repeat,
      linear-gradient(to left, #00eef3, #00eef3) right top no-repeat,
      linear-gradient(to top, #00eef3, #00eef3) right bottom no-repeat,
      linear-gradient(to left, #00eef3, #00eef3) right bottom no-repeat,
      linear-gradient(to top, #00eef3, #00eef3) left bottom no-repeat,
      linear-gradient(to right, #00eef3, #00eef3) left bottom no-repeat;
    background-size:
      24px 2px,
      2px 24px;
  }

  &.is-grid {
    background: url('/imgs/business/visual-dark/card-bg-1.png');
    background-size: 100% auto;
    background-repeat: round;
  }

  &::before {
    width: 100%;
    height: 1px;
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
    box-shadow: 0 0 6px rgba(7, 118, 181, 0.8);
  }
}

.page-panel-header {
  padding: 12px 15px;
  padding-left: 30px;
  font-size: 14px;
  font-weight: bold;
  background: url('/imgs/business/visual-dark/card-border-1.png');
  background-repeat: no-repeat;
  background-position: 6px 28px;
  box-sizing: border-box;
  // border-bottom: 1px solid rgba(7, 118, 181, .7);
  position: relative;

  &::before {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background: rgba(22, 214, 255, 0.9);
    box-shadow: 0 0 5px rgba(22, 214, 255, 0.9);
    border-radius: 10px;
    left: 15px;
    top: 18px;
  }

  // &::after {
  //   width: 100%;
  //   height: 1px;
  //   content: "";
  //   position: absolute;
  //   left: 0;
  //   bottom: -1px;
  //   background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
  //   box-shadow: 0 0 5px rgba(131, 189, 227, 1);
  //   opacity: .6;
  // }
}

.page-panel-body {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
}
</style>
